<template>
  <a-drawer title="新增院系专业招生计划"  width=650 placement="right" :closable="false" @close="onClose"
    :visible="professionalAddVisiable" style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-row :gutter="48">
        <a-col :sm="{span:12}" :md="{span:12}">
          <a-form-item label='院系'>
            <a-select :allowClear="true" showSearch optionFilterProp="children" v-decorator="['zsyxm',{initialValue:postParams.zsyxm}]" @change="yxChange">
              <a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{ i.dwh+"-"+ i.dwmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :md="{span:12}">
          <a-form-item label='招生年度'>
            <a-select showSearch optionFilterProp="children" v-decorator="['zsnj',{initialValue:postParams.zsnj}]">
              <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
       <a-col :sm="{span:12}" :md="{span:12}">
          <a-form-item label='专业'>
            <a-select :allowClear="true" showSearch optionFilterProp="children" v-decorator="['zszym',{initialValue:postParams.zszym}]" @change="zyChange">
              <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.zyh">{{ i.zyh+'-'+i.zymc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :md="{span:12}">
        <a-form-item label='学习形式'>
          <a-select showSearch optionFilterProp="children" v-decorator="['qrzhfqrz',{initialValue:postParams.qrzhfqrz}]">
            <a-select-option v-for="i in selectMenu.xxlx" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
        <a-col :sm="{span:12}" :md="{span:12}">
          <a-form-item label='培养模式'>
            <a-select showSearch optionFilterProp="children" v-decorator="['pymsm',{initialValue:postParams.pymsm}]" disabled>
              <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.pymsm">{{ i.pymsmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :md="{span:12}">
          <a-form-item label='本专业计划数'>
            <a-input  v-decorator="['zszjhrs',{initialValue:postParams.zszjhrs}]" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label='备注' style="margin-top:20px">
        <a-textarea placeholder="请输入..." v-decorator="['note',{initialValue:postParams.note}]"/>
      </a-form-item>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button style="margin-right: .8rem" @click="onClose">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="loading">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
  // import moment from 'moment'
  import {
    STable
  } from '~'
  import {
    mapState
  } from 'vuex'

  const formItemLayout = {
    labelCol: {
      span: 3
    },
    wrapperCol: {
      span: 18
    }
  }

  const selectArr = ['TYPE0126', 'TYPE0075', 'TYPE0125', 'TYPE0072']
  export default {
    name: 'ProfessionalAdd',
    props: {
      professionalAddVisiable: {
        default: false
      }
    },
    components: {
      STable
    },
    data() {
      return {
        formItemLayout,
        loading: false,
        data: [{
          column: '总计划',
          plan: '',
          key: 'zjh'
        }],
        postParams: {
          zsnj: '',
          zsyxm:'',
          qrzhfqrz:''
        },
        // 表头
        columns: [{
            title: '',
            dataIndex: 'column'
          },
          {
            title: '计划',
            scopedSlots: {
              customRender: 'plan'
            }
          }
        ],
        selectMenu: {
          yx: [], // 院系,
          zy: [],
          xxlx: []
        }
      }
    },
    computed: {
      ...mapState({
        systemInfo: state => state.app.systemInfo,
        TYPE0126: state => state.app['TYPE0126'] // 年级
      })
    },
    beforeCreate() {
      this.form = this.$form.createForm(this)
    },
    created() {
      this.initSelectMenu()
      selectArr.forEach(v => {
        this.$store.dispatch('app/setDictionary', v)
      })
    },
    methods: {
      initSelectMenu() {
        let allRequest = [
          this.$api.base.collegeAll()
        ]
        Promise.all(allRequest).then(res => {
          this.selectMenu.yx = res[0].data
          this.postParams.zsyxm = res[0].data[0].dwh
          this.$api.base.majorAll({
            lsdwh: res[0].data[0].dwh
          }).then(res => {
            if (res.data) {
              this.selectMenu.zy = res.data
              this.postParams.zszym = res.data[0].zyh
              this.postParams.pymsm = res.data[0].pymsm


            }
          })
          this.$api.base.dictionaryData('TYPE0441').then(res => {
            this.selectMenu.xxlx = res.data
            this.postParams.qrzhfqrz = res.data[0].code
             // 获取当前学年
            this.$api.base.getSchoolYear().then(res => {
              this.postParams.zsnj = res.data.masterAdmissionYear
            })
          })
        })
      },
      reset() {
        this.data = [{
          column: '总计划',
          plan: '',
          key: 'zjh'
        }]
      },
      // 选择院系
      yxChange(code) {
        console.log(code)
        this.postParams.zsyxm = code
        this.postParams.zszym = ''
        this.$set(this.selectMenu,'zy',[])
        this.form.setFieldsValue({
          'zszym': ''
        })
        if(code){
          this.getProssion(code)
        }
      },
      getProssion(code) {
        this.$api.base.majorAll({
          lsdwh: code
        }).then(res => {
          if (res.data) {
            this.selectMenu.zy = res.data
          }
        })
      },
      // 选择招生年度
      zsndChange() {

      },
      zyChange(code){
        // console.log(this.form.getFieldDecorator().zszym)
        this.selectMenu.zy.forEach(item =>{
          if(code == item.zyh){
            this.form.setFieldsValue({'pymsm':item.pymsm})
          }
        })
      },
      // 关闭
      onClose() {
        this.reset()
        this.$emit('close')
         this.form.resetFields()
        this.reset()
        this.postParams.bz = ''
        this.initSelectMenu()
      },
      // 保存
      handleSubmit() {
        let paramms = Object.assign({
          zsjhlxm: '02'
        }, this.form.getFieldsValue())
        this.$api.recruitstat.disProsseionPlanAdd(paramms).then(res => {
          this.$emit('success')
           this.form.resetFields()
           this.reset()
           this.postParams.bz = ''
           this.initSelectMenu()
        }).finally(() => {
          this.loadingBtn = false
        })
      },
      // 修改各计划人数人数
      handleChange(key, dataIndex, value) {
        const dataSource = [...this.data]
        const target = dataSource.find(item => item.key === key)
        if (target) {
          target[dataIndex] = value
          this.data = dataSource
        }
      }
    }
  }
</script>
